<template>
    <div class="container">
        <a-modal v-model:visible="visible" title="添加应用" footer="" style="width: 850px;" :maskClosable="false">
            <a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" v-bind="layout"
                @finish="handleFinish" @validate="handleValidate" @finishFailed="handleFinishFailed">
                <a-form-item has-feedback label="系统名称" name="system_name">
                    <a-input v-model:value="formState.system_name" type="text" autocomplete="off" />
                </a-form-item>
                <a-form-item has-feedback label="数据库账号" name="database_account">
                    <a-input v-model:value="formState.database_account" type="text" autocomplete="off" />
                </a-form-item>
                <a-form-item has-feedback label="密码" name="database_password">
                    <a-input v-model:value="formState.database_password" type="password" autocomplete="off" />
                </a-form-item>

                <a-form-item has-feedback label="基础数据库权限" name="base_database_power">
                    <a-select v-model:value="defaultBaseDatabase" label-in-value style="width:466px"
                        :options="BaseDatabaseOptions" @change="base_database_change"></a-select>
                </a-form-item>
                <a-form-item has-feedback label="应用数据库是否使用" name="app_database">
                    <a-switch @change="databaseCheck" v-model:checked="app_database_check" checked-children="是"
                        un-checked-children="否" style="float: left;" />
                </a-form-item>
                <template v-if="app_database_check">
                    <a-form-item has-feedback label="应用数据库名称" name="app_db_name">
                        <a-input v-model:value="formState.app_db_name" type="text" autocomplete="off" />
                    </a-form-item>
                    <a-form-item has-feedback label="应用数据库权限" name="app_database_power">
                        <a-select v-model:value="defaultAppDatabase" label-in-value style="width:466px"
                            :options="AppDatabaseOptions" @change="app_database_change"></a-select>
                    </a-form-item>
                    <a-form-item has-feedback label="是否使用GIS" name="use_gis">
                        <a-switch @change="gisCheck" v-model:checked="gis_check" checked-children="是"
                            un-checked-children="否" style="float: left;" />
                    </a-form-item>
                </template>
                <div
                    style="display: flex;justify-content: space-around;width: 300px;margin-left: 50%;transform: translateX(-50%);">
                    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                        <a-button type="primary" html-type="submit">保存</a-button>
                    </a-form-item>
                    <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                        <a-button type="primary" @click="visible = false">取消</a-button>
                    </a-form-item>
                </div>

            </a-form>
        </a-modal>
    </div>
</template>

<script>
export default {
    name: "userEdit",
};
</script>
<script setup>
import { useRouter, useRoute } from "vue-router";
import { createApplication } from '@api/application.js'
import { defineComponent, reactive, ref, onMounted } from 'vue'
import { message } from 'ant-design-vue';
const emit = defineEmits(['getApplicationList'])
const router = useRouter();
const formRef = ref()
const visible = ref(false);
let app_database_check = ref(false)
let gis_check = ref(false)
let formState = reactive({
    system_name: '',
    database_account: '',
    database_password: '',
    app_db_name: '',
});
let defaultBaseDatabase = ref('只读')
const BaseDatabaseOptions = ref([
    {
        value: '只读',
        label: '只读',
    },
    {
        value: '读写',
        label: '读写',
    },
]);
let defaultAppDatabase = ref('只读')
const AppDatabaseOptions = ref([
    {
        value: '只读',
        label: '只读',
    },
    {
        value: '读写',
        label: '读写',
    },
]);
let validate = async (_rule, value) => {
    if (value === '') {
        return Promise.reject('必填项');
    }
};
// 非空验证
const rules = {
    system_name: [
        {
            required: true,
            validator: validate,
            trigger: 'change',
        }
    ],
    database_account: [
        {
            required: true,
            validator: validate,
            trigger: 'change',
        }
    ],
    database_password: [
        {
            required: true,
            validator: validate,
            trigger: 'change',
        }
    ],
    app_db_name: [
        {
            required: true,
            validator: validate,
            trigger: 'change',
        }
    ],
};
const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 14,
    },
};
function databaseCheck() {
    app_database_check.value = app_database_check.value
    if (app_database_check.value) {
        gis_check.value = true
        formState.app_db_name = ''
        defaultAppDatabase.value = '读写'
    }
}
function gisCheck() {
    gis_check.value = gis_check.value
}

function base_database_change(value) {
    if (value.value === '只读') {
        defaultBaseDatabase.value = '只读'
    } else {
        defaultBaseDatabase.value = '读写'
    }
}
function app_database_change(value) {
    if (value.value === '只读') {
        defaultAppDatabase.value = '只读'
    } else {
        defaultAppDatabase.value = '读写'
    }
}
const handleFinish = values => {
    createApplication({
        system_name: formState.system_name,
        database_account: formState.database_account,
        database_password: formState.database_password,
        app_db_name: formState.app_db_name,
        app_database: app_database_check.value,
        use_gis: gis_check.value,
        base_database_read_write: defaultBaseDatabase.value === '只读' ? 1 : 2,
        app_database_read_write: defaultAppDatabase.value === '只读' ? 1 : 2,
    })
        .then(res => {
            message.success('创建成功')
            emit('getApplicationList')
            visible.value = false
        })
        .catch(err => {
            // console.log(err.response.data.hasOwnProperty('email'))
            console.log(err)
            if (err.response.data.hasOwnProperty('usedatabase_account')) {
                message.error(err.response.data.usedatabase_account)
            } else if (err.response.data.hasOwnProperty('database_account')) {
                message.error(err.response.data.database_account)
            } else if (err.response.data.hasOwnProperty('app_db_name')) {
                message.error(err.response.data.app_db_name)
            } else if (err.response.data.hasOwnProperty('system_name')) {
                message.error(err.response.data.system_name)
            }
        })
};
const handleFinishFailed = (values, errorFields, outOfDate) => {
    console.log(values, errorFields, outOfDate, '---------');
};
defineExpose({
    visible,
    formState
})
</script>

<style lang="less" scoped>
.container {
    height: calc(100vh - 85px);
    padding: 20px;

    ::v-deep .ant-card-body {
        position: absolute;
        width: 1000px;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

::v-deep .ant-form-item-children-icon {
    display: none;
}
</style>